<!-- 右侧组件 -->
<template>
  <div class="homeself">
    <headers></headers>
    <h1>数据统计</h1>
    <div class="homeself-count">
      <div class="count1 countall">
        <div class="count1-l">
          总用户量<span>{{ allusercount }}</span>
        </div>
        <div class="count1-2">
          注册用户<span>{{ usercount }}</span>
        </div>
      </div>
      <div class="count2 countall">
        <div class="count1-l">
          总订单量<span>{{ allordercount }}</span>
        </div>
        <div class="count1-2">
          新增订单<span>{{ ordercount }}</span>
        </div>
      </div>
      <div class="count3 countall">
        <div class="count1-l">
          管理员<span>{{ alladmincount }}</span>
        </div>
        <div class="count1-2">
          新增管理员<span>{{ admincount }}</span>
        </div>
      </div>
    </div>
    <echart :sevendayis="sevenday" :sevendaydatais="sevendaydata"></echart>
  </div>
</template>


<script>
import Header from "./header";
import Echart from "./echarts";
import { DateUtils } from "../utils/Utils";
import {
  getUsercount,
  getAllusercount,
  getOrdercount,
  getAllordercount,
  getAdmincount,
  getAlladmincount,
} from "../axios/api";
export default {
  data() {
    //这里存放数据
    return {
      usercount: 0,
      allusercount: 0,
      ordercount: 0,
      allordercount: 0,
      admincount: 0,
      alladmincount: 0,
      sevenday: [],
      sevendaydata: [[], [], []],
    };
  },
  //组件
  components: {
    headers: Header,
    echart: Echart,
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 获取7天的数据 */
    getSevenday() {
      for (var i = 6; i >= 0; i--) {
        var oldday = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i);
        var today = DateUtils.getFormatDate(oldday);
        this.sevenday.push(today);
      }
      var apiarr = [[], [], []];
      this.sevenday.forEach((item) => {
        apiarr[0].push(getUsercount(item));
        apiarr[1].push(getOrdercount(item));
        apiarr[2].push(getAdmincount(item));
      });
      Promise.all([...apiarr[0], ...apiarr[1], ...apiarr[2]]).then((res) => {
        res.forEach((item, index) => {
          this.sevendaydata[parseInt(index / 7)].push(item.count);
        });
        console.log(this.sevendaydata);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    /* 获取当天的数据 */
    var today = DateUtils.getFormatDate(new Date());
    Promise.all([
      getUsercount(today),
      getAllusercount(),
      getOrdercount(today),
      getAllordercount(),
      getAdmincount(today),
      getAlladmincount(),
    ]).then((res) => {
      this.usercount = res[0].count;
      this.allusercount = res[1].count;
      this.ordercount = res[2].count;
      this.allordercount = res[3].count;
      this.admincount = res[4].count;
      this.alladmincount = res[5].count;
    });
    this.getSevenday();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  lang='less'>
.homeself {
  h1 {
    height: 50px;
  }

  .homeself-count {
    height: 78px;
    display: flex;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    .count1 {
      flex: 1;
      border-right: 1px solid #ccc;
    }

    .count2 {
      flex: 1;
      border-right: 1px solid #ccc;
    }

    .count3 {
      flex: 1;
    }
    .count1-l {
      flex: 1;
      line-height: 78px;
      font-size: 26px;
      span {
        font-size: 46px;
        line-height: 78px;
        color: chocolate;
      }
    }

    .count1-2 {
      flex: 1;
      line-height: 78px;
      font-size: 26px;
      span {
        font-size: 46px;
        line-height: 78px;
        color: cornflowerblue;
      }
    }
    .countall {
      display: flex;
    }
  }
}
</style>